<template>
	<view class="ios-bottom">
		<view v-if="tranStuts" class="popup_bj" :class="[popClass]" style="z-index: 1;" @animationend="popupAnimation">
		</view>
		<view class="trans-text fs28" v-if="showMin" :style="{transform: `translateY(${transY}%)`,top:`${transTop}px`}"
			@click="showTrnas">
			<view class="trans__item fsc">最新获取时间
				<uni-icons type="checkmarkempty" color="#FF7803" size="12" />
			</view>
			<view class="trans__item fsc">回收价由高到低</view>
			<view class="trans__item fsc">回收价由低到高</view>
		</view>
		<view class="head ps">
			<SwiperTab :list="headList" @click="changeTab" />
			<view v-if="showMin" class="mintba fsc px30" :class="{'sales_style':tabIndex === 2}">
				<template v-if="tabIndex !== 2">
					<view class="flex_y">
						<view class="">共<text class="t_FF7803">13</text>件</view>
						<view class="py8">丨</view>
						<uni-icons class="t_FF7803" @click="ruleShow = true" type="info" size="14" color></uni-icons>
					</view>
					<view class="fg0 flex_y">
						<template v-if="tabIndex !== 1">
							<view class="ml28 flex_y" @click="goPage" data-url="/pagesBag/lock/lock?status=lock">
								<image class="img32_32 mr6" src="/static/images/icon/lock.png" mode="aspectFill" />
								锁定
							</view>
							<view class="ml28 flex_y">
								<image class="img32_32 mr6" src="/static/images/icon/spread.png" mode="aspectFill" />
								展开
							</view>
							<view class="ml28 flex_y" @click="showTrnas">
								<image class="img32_32 mr6" src="/static/images/icon/screen.png" mode="aspectFill" />
								筛选
							</view>
						</template>
						<template v-if="tabIndex === 1">
							<view class="ml28 flex_y" @click="goPage" data-url="/pagesBag/lock/lock?status=unlock">
								<image class="img32_32 mr6" src="/static/images/icon/lock.png" mode="aspectFill" />
								解锁
							</view>
						</template>
						<view class="ml28 flex_y" @click="showTrnas">
							<image class="img36_36 mr6" src="/static/images/icon/sort.png" mode="aspectFill" />
							排序
						</view>
					</view>
				</template>
				<template v-if="tabIndex === 2">
					<view class="flex_y">
						<view class="ml30" :class="{'t_FF7803':salesIndex === 0}" @click="salesIndex = 0">普通寄售</view>
						<view class="ml60" :class="{'t_FF7803':salesIndex === 1}" @click="salesIndex = 1">快速寄售</view>
					</view>
					<view class="">共计13件</view>
				</template>
			</view>
			<template v-if="showHint">
				<view class="mintba px30 t_FF7803 flex_y" style="background: #F9EBDF;">如需解除冻结，请联系客服</view>
			</template>
		</view>
		<view class="" :style="{height:transTop + 'px'}"></view>
		<!-- 商品列表 -->
		<view class="body px30">
			<block v-for="(item,index) in goodsList" :key="index">
				<view class="flex_y body-item py32" @click="showGoods = true">
					<view class="body-item__left pr mr30">
						<image class="img156_156"
							src="https://magic-box-app.oss-cn-hangzhou.aliyuncs.com/images/75df1aad-f58e-4fa2-a192-c8651a604234_c8b09280400e47c89c25e00c2f910e12_dbdda5d8a4324f08900ddea2e42378f6_c90f0d140b7f40758cca4860d6b34b10.jpg"
							mode="aspectFill" />
						<view class="lfet__tag fjc fs20">预告</view>
					</view>
					<view class="body-item__info">
						<view class="goods__title fs28">
							<view class="ellipsis-1">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
							<view class="FristTest YouSheBiaoTiHei">First赏</view>
						</view>
						<view class="goods_price">
							<view class="fs20">
								￥<text class="fs32 fw500">30.36</text>
							</view>
							<view class="" v-if="index === 0">
								×10
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>

		<view class="footer" v-if="tabIndex === 0">
			<view class="footer-box px32 fsc ios-bottom fs28 t_666 fw500">
				<view class="footer-box__btn fjc" @click="showSales = true">去寄售</view>
				<view class="footer-box__btn fjc" @click="goPage" data-url="/pagesBag/shipments/shipments">去发货</view>
				<view class="footer-box__btn fjc convert t_fff" @click="goPage" data-url="/pagesBag/convert/convert">去兑换
				</view>
			</view>
		</view>
		<!-- 背包规则 -->
		<u-popup :show="ruleShow" @close="ruleShow = false" mode="bottom" round="32">
			<view class="rule fs28 t_333 px30">
				<view class="rule__content pr">背包规则
					<image class="rule__close pa" @click="ruleShow = false" src="/static/images/icon/x.png"
						mode="aspectFill"></image>
				</view>
				<view class="" style="max-height: 948rpx;overflow-y: auto;">
					<text class="lh44">关于发货：
						2、赏品进入背包后，30天内未进行操作，将对商品进行冻结处理，如需解冻，需联系客服给您处理
						3、请务必确保您填写的默认地址是真实有效的，因您地址错误或其他个人原因导致的任何损失由您自行承担。
						4、自动发货的订单，您因各种理由拒收造成的损失由您个人承担。
						4、申请发货截止时间：每周一至周五，当日24：00点为本日发货订单截止点。截止点后点击发货的订单默认合并到下一个发货日。正常情况下五个工作日发出（若遇发货高峰期，可能会延迟发货，敬请谅解)
						5,周末以及国家法定节假日：可申请发货，但不实际发货，由下一个自然工作周的周一进行发货。
						6、发货机制：平台默认使用京东物流，8件包邮国内大部分地区(港、澳、台、西藏需联系客服补差价)，不到8件预付12元邮费发国内大部分地区（港、澳、台、西藏需联系客服补差价）。如需使用顺丰到付，请联系客服。只申请小赏不发出
						7、如因非人为原因导致出现赏品损坏请及时沟通客服，可调换新的同款赏品（以退换货规则为准）；不支持退货、调换其他款赏品。
						8、同款赏品退换达到2次，视为恶意行为，用户将被拉入黑名单，并冻结账户，不可使用平台购买服务及其他相关服务。
						9.因不可抗九因素导致预售款商品无法寄出.平台将在15个T作</text>
				</view>
			</view>
		</u-popup>
		<!-- 寄售 -->
		<Sales :show="showSales" @close="showSales = false" />
		<!-- 商品详情 -->
		<u-popup :show="showGoods" @close="showGoods = false" mode="center" :safeAreaInsetBottom="false">
			<view class="goods fs28 t_333">
				<image class="goods__img pr"
					src="https://magic-box-app.oss-cn-hangzhou.aliyuncs.com/images/75df1aad-f58e-4fa2-a192-c8651a604234_c8b09280400e47c89c25e00c2f910e12_dbdda5d8a4324f08900ddea2e42378f6_c90f0d140b7f40758cca4860d6b34b10.jpg"
					mode="aspectFill">
					<image class="goods__icon" src="/static/images/icon/goods_lock.png" mode="aspectFill" />
				</image>
				<view class="goods__content px24 pt16 pb44">
					<view class="lh44 ellipsis-1 mb24">商品名称商品名称商品名称商品名称商商品名称商品名称商品名称商品名称商...</view>
					<view class="goods__detail fs24 lh24">
						<view class="flex_y">
							<view class="fg1" style="flex: 1;">
								<view class="t_999">奖品等级：</view>
								<view class="t_333 pt16">隐藏款</view>
							</view>
							<view class="fg1 " style="flex: 1;">
								<view class="t_999">回收价：</view>
								<view class="t_333 pt16">¥30.36</view>
							</view>
						</view>
						<view class="flex_y">
							<view class="fg1" style="flex: 1;">
								<view class="t_999">奖品状态</view>
								<view class="t_333 pt16">现货</view>
							</view>
							<view class="fg1 " style="flex: 1;">
								<view class="t_999">发售日期：</view>
								<view class="t_333 pt16">2023/08/17</view>
							</view>
						</view>
						<view class="flex_y fs24">
							<view class="fg1" style="flex: 1;">
								<view class="t_999">抽取方式：</view>
								<view class="t_333 pt16">抽赏赠送：</view>
							</view>
							<view class="fg1 " style="flex: 1;">
								<view class="t_999">获取时间：</view>
								<view class="t_333 pt16 ">2023/08/17 15:16:48</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import SwiperTab from '../compontents/swiperTab.vue'
	import Sales from './components/sales.vue'
	export default {
		components: {
			SwiperTab,
			Sales,
		},
		data() {
			return {
				tranStuts: false,
				animationStatus: '',
				ruleShow: false, //规则显示
				showGoods: false, //详情显示
				showSales: false, //寄售弹窗
				popClass: 'show-element', //过度动画
				tabIndex: 0, //导航下标
				salesIndex: 0, //寄售下标
				headList: [{
					name: '待提货',
				}, {
					name: '已锁定',
				}, {
					name: '已寄售',
				}, {
					name: '已兑换',
				}, {
					name: '已冻结',
				}],
				goodsList: [],
				transY: -100,
				transTop: 0, //占位符高度
			}
		},
		computed: {
			showMin() {
				let arr = [0, 1, 2]
				return arr.includes(this.tabIndex)
			},
			showHint() {
				return this.tabIndex === 4
			}
		},
		watch: {
			tabIndex() {
				this.$nextTick(() => {
					uni.$z.getRectInfo('.head').then(size => {
						this.transTop = size.height
					})
				})
			}
		},
		onShow() {
			this.goodsList = new Array(7).fill({
				name: 12,
			})
		},
		onReady() {
			uni.$z.getRectInfo('.head').then(size => {
				this.transTop = size.height
			})
		},
		methods: {
			showTrnas() {
				if (this.tranStuts) {
					this.popClass = 'hidden-element'
				} else {
					this.popClass = 'show-element'
					this.tranStuts = !this.tranStuts
				}
				let test = {
					0: -100,
					'-100': 0
				}
				// this.transY = 0
				setTimeout(() => {
					this.transY = test[this.transY]
				}, 100)
			},
			popupAnimation() {
				if (this.popClass === 'hidden-element') {
					this.tranStuts = false
				}
				this.popClass = '' //清除动画
			},
			changeTab(e) {
				let {
					index
				} = e
				this.tabIndex = index
			},
			goPage(e) {
				let {
					url
				} = e.currentTarget.dataset;
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		color: #333;
	}

	.popup_bj {
		position: fixed;
		top: 0;
		height: 0;
		right: 0;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.show-element {
		animation: appear .7s linear forwards;
	}

	.hidden-element {
		animation: appear .7s linear forwards reverse;
	}

	@keyframes appear {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.trans-text {
		position: fixed;
		top: 152rpx;
		left: 0;
		right: 0;
		background: #fff;
		height: 328rpx;
		transition: all .7s;
		transform: translateY(-100%);
		z-index: 1;
		border-radius: 0 0 28rpx 28rpx;

		.trans__item {
			height: 88rpx;
			line-height: 88rpx;
			padding: 0 32rpx;
		}
	}

	.FristTest {
		width: 102rpx;
		font-size: 28rpx;
		line-height: 32rpx;
		background: linear-gradient(107deg, #F074AB 0%, #7D71F5 99%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}

	.img32_32 {
		width: 32rpx;
		height: 32rpx;
	}

	.img36_36 {
		width: 36rpx;
		height: 36rpx;
	}

	.img156_156 {
		width: 156rpx;
		height: 156rpx;
		border-radius: 8rpx;
	}

	.head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;

		.mintba {
			height: 80rpx;
			background: #f8f8f8;
		}

		.sales_style {
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);
			background: #fff;
		}
	}

	.body {
		&-item {
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);

			&__left {
				.lfet__tag {
					position: absolute;
					top: -8rpx;
					left: 0;
					width: 60rpx;
					height: 32rpx;
					color: #fff;
					background: #FF7803;
					border-radius: 8rpx 0 8rpx 0;
				}
			}

			.goods__title {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 480rpx;
				height: 92rpx;
			}

			.goods_price {
				width: 480rpx;
				height: 64rpx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
			}
		}
	}

	.footer {
		height: 108rpx;

		&-box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: inherit;
			background: #fff;

			&__btn {
				width: 192rpx;
				height: 72rpx;
				border-radius: 8rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.1);
			}

			.convert {
				border: unset;
				background: #FF7803;
			}
		}
	}

	.rule {
		&__content {
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
		}

		&__close {
			width: 36rpx;
			height: 36rpx;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}
	}

	.goods {
		width: 568rpx;

		&__img {
			width: 568rpx;
			height: 568rpx;
		}

		&__icon {
			position: absolute;
			top: 48rpx;
			right: 40rpx;
			width: 40rpx;
			height: 52rpx;
		}

		&__detail {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 256rpx;
		}
	}
</style>